<template>
  <div class="col-lg-12 featured-bg">
    <div class="col-lg-1"></div>
    <!-- ANIME -->
    <div class="container-fluid col-lg-10">
      <div class="container-fluid">
        <!-- MAIN CONTENT -->
        <div class="col-lg-8 col-md-12">
          <div class="clearfix"></div>
          <!-- CURRENTLY VIEWING -->
          <section id="cur-view">
            <h2 class="icon"><i class="fa" :class="icon[message.type]" aria-hidden="true"></i>{{ title[message.type] }}</h2>
            <a :href="message.more" class="more-list more-list-left">
              <h4>更多&nbsp;&nbsp;<i class="fa fa-chevron-right" aria-hidden="true"></i></h4>
            </a>
            <a href="javascript:;" @click="change" class="more-list">
              <h4><i class="fa fa-refresh" aria-hidden="true"></i>换一批&nbsp;&nbsp;</h4>
            </a>
            <div id="anime-list" class="row auto-clear">
              <transition-group name="kerwin">
                <Video2 v-for="item in videos" :key="item.id" :message="item.data"></Video2>
              </transition-group>
            </div>
          </section>
        </div>

        <!-- SIDEBAR -->
        <div id="anime-ranking-list" class="col-lg-4 hidden-md hidden-sm hidden-xs">
          <aside class="dark-bg sidebar">
            <article>
              <h2 class="icon"><i class="fa fa-signal" aria-hidden="true"></i>排行榜</h2>
              <ul class="sidebar-links">
                <li class="fa fa-chevron-right" v-for="item in rankingList" :key="item.id">
                  <a :href="item.href">{{ item.name }}</a>
                </li>
                <li class="fa fa-chevron-right">
                  <a :href="toRank[message.type]">
                    <i class="fa fa-hand-o-right"></i>&nbsp;&nbsp;查看更多&nbsp;&nbsp;<i
                    class="fa fa-hand-o-left"></i>
                  </a>
                </li>
              </ul>
            </article>
          </aside>
        </div>
      </div>

      <!-- LINE -->
      <div class="container-fluid channels-bg"></div>
    </div>
    <div class="col-lg-1"></div>
  </div>
</template>

<script>
import Video2 from '../video/Video2'
import {getCountList, getHotList} from './recommend-js'
export default {
  name: 'Recommend',
  data () {
    return {
      title: ['动漫推荐', '漫画推荐', '小说推荐'],
      icon: [
        {'fa-optin-monster': true, 'fa-themeisle': false, 'fa-tripadvisor': false},
        {'fa-optin-monster': false, 'fa-themeisle': true, 'fa-tripadvisor': false},
        {'fa-optin-monster': false, 'fa-themeisle': false, 'fa-tripadvisor': true}
      ],
      now: 0,
      videos: [],
      videoList: [],
      rankingList: [
        {id: 0, name: 'NULL', href: '#'},
        {id: 1, name: 'NULL', href: '#'},
        {id: 2, name: 'NULL', href: '#'},
        {id: 3, name: 'NULL', href: '#'},
        {id: 4, name: 'NULL', href: '#'},
        {id: 5, name: 'NULL', href: '#'},
        {id: 6, name: 'NULL', href: '#'},
        {id: 7, name: 'NULL', href: '#'},
        {id: 8, name: 'NULL', href: '#'},
        {id: 9, name: 'NULL', href: '#'}
      ],
      toRank: ['/#/rank/anime', '/#/rank/manga', '/#/rank/novel']
    }
  },
  mounted () {
    for (let i = 0; i < 24; i++) {
      const video = {id: i, data: {count: 2000, cover: null, href: '#', name: 'NULL', tag: 2, status: 0, allNum: 0, refreshNum: 0}}
      this.videoList.push(video)
    }
    this.videos = this.videoList.slice(0, 8)
    // 获取视频列表
    getCountList(this, this.message.type)
    // 获取热度拍排行榜
    getHotList(this, this.message.type)
  },
  methods: {
    change: function () {
      this.now += 8
      if (this.now === 24) {
        this.now = 0
      }
      this.videos = this.videoList.slice(this.now, this.now + 8)
    }
  },
  props: ['message'],
  components: {Video2}
}
</script>

<style scoped>
.kerwin-enter-active {
  animation: aaa 0.5s;
}
.kerwin-leave-active {
  animation: aaa 0.5s reverse;
}
@keyframes aaa {
  0% {
    opacity: 0;
    transform: translateX(40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
</style>
